
const iconObj = {
    'success': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <path stroke="currentColor" d="m16.667 25l6.25 6.25l10.416-10.417"></path>
        <path stroke="currentColor" d="M25 43.75c10.355 0 18.75-8.395 18.75-18.75S35.355 6.25 25 6.25S6.25 14.645 6.25 25S14.645 43.75 25 43.75"></path>
    </g>
</svg>`,
    'warning': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="currentColor" stroke-width="3" d="M24.896 34.375h.208"></path>
        <path stroke="currentColor" stroke-width="2" d="M43.75 25c0-10.355-8.395-18.75-18.75-18.75S6.25 14.645 6.25 25S14.645 43.75 25 43.75S43.75 35.355 43.75 25"></path>
        <path stroke="currentColor" stroke-width="2" d="M25 25V14.583"></path>
    </g>
</svg>`,
    'error': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
        <path stroke="currentColor" d="m31.25 31.25l-12.5-12.5m0 12.5l12.5-12.5"></path>
        <path stroke="currentColor" d="M25 43.75c10.355 0 18.75-8.395 18.75-18.75S35.355 6.25 25 6.25S6.25 14.645 6.25 25S14.645 43.75 25 43.75"></path>
    </g>
</svg>`,
    'info': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="currentColor" stroke-width="3" d="M33.333 22.917h.209m-8.542 0h.208zm-8.542 0h.209z"></path>
        <path stroke="currentColor" stroke-width="2"
            d="m39.188 33.813l2.479 9.937l-10.313-5.167a20.5 20.5 0 0 1-6.354 1c-10.417 0-18.75-7.458-18.75-16.666S14.583 6.25 25 6.25s18.75 7.458 18.75 16.667a15.6 15.6 0 0 1-4.562 10.895">
        </path>
    </g>
</svg>`,
};

const MessageBox = function (option) {
    let message = option.message || '';
    let duration = option.duration;
    if(option.duration === undefined || option.duration === null) {
        duration = 2000;//默认2秒自动关闭
    }
    let dn = parseInt(duration);
    if(isNaN(dn)) {
        dn = 2000;
    }
    duration = dn;

    let type = option.type;
    if(!option.type || !Object.keys(iconObj).includes(option.type)) {
        type = 'info';//默认为info
    }
    const createBox = function () {
        if(noCreate){
            return;
        }
        let messageBoxDiv = document.createElement('div');
        messageBoxDiv.className = 'message-box-dl '+ this.type + '-dl';

        let iconBox = document.createElement('div');
        iconBox.className = 'icon ' + this.type + '-dl';
        iconBox.innerHTML = iconObj[this.type];

        let contentDiv = document.createElement('div');
        contentDiv.className = 'content';
        contentDiv.innerText = this.message;

        messageBoxDiv.appendChild(iconBox);
        messageBoxDiv.appendChild(contentDiv);

        this.root = messageBoxDiv;
        document.body.appendChild(this.root);

        
        this.hideTop = MessageBox.lastTop;
        this.root.style.top = this.hideTop + 'px';
        this.showTop = this.hideTop + MessageBox.space;
        MessageBox.boxs.push(this);
        //更新lastTop
        MessageBox.lastTop = this.showTop + this.root.offsetHeight;
    }
    const showBox = function () {
        MessageBox.showMessageBox();
    }
    const closeBox = function () {
        this.hide = true;
        this.root.style.opacity = 0;
        this.root.style.top = this.hideTop + 'px';
        //从boxs移除
        setTimeout(()=>{
            this.root.remove();
        }, 1000);
        MessageBox.clearMessageBox();
    }
    
    const mbox = {
        message: message,
        duration: duration,
        type: type,
        show: false,
        hide: false,
        root: undefined,
        createBox: createBox,
        showBox: showBox,
        closeBox: closeBox,
    };
    mbox.createBox();
    mbox.showBox();
    return mbox;
};

MessageBox.boxs = [];
MessageBox.showTopArr = [];
MessageBox.space = 30;//消息框间距
MessageBox.lastTop = 0;
let noCreate = false;

MessageBox.initMessageBox = function () {
    let styleDom = document.createElement('style');
    styleDom.innerHTML = `
    .message-box-dl {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        padding: 0.1rem 0.2rem;
        border-radius: 0.06rem;
        display: flex;
        align-items: center;
        background-color: #f0f0f0;
        transition: all 0.5s ease-in-out;
        opacity: 0;
    }
    .message-box-dl .icon {
        width: 0.6rem;
        height: 0.6rem;
        flex: 1 0 auto;
    }
    .message-box-dl .content {
        font-size: 0.4rem;
        padding-left: 0.2rem;
        word-break: break-all;
    }
    .success-dl {
        color: #67C23A;
        background-color: #e1f3d8;
    }
    .warning-dl {
        color: #E6A23C;
        background-color: #faecd8;
    }
    .error-dl {
        color: #F56C6C;
        background-color: #fde2e2;
    }
    .message-box-dl .info-dl {
        color: #909399;
        background-color: #e9e9eb;
    }`;
    document.head.appendChild(styleDom);
}

MessageBox.showMessageBox = function () {
    const arr = MessageBox.boxs;
    for(let i=0;i<arr.length;i++) {
        let box = arr[i];
        if(!box.show) {
            setTimeout(()=>{
                box.root.style.opacity = 1;
                box.root.style.top = box.showTop + 'px';
                box.show = true;
                MessageBox.showTopArr.push(box.showTop);
                setTimeout(()=>{
                    box.closeBox();
                }, box.duration);
            }, 10);
        }
    }
}

MessageBox.clearMessageBox = function () {
    noCreate = true;
    const arr = MessageBox.boxs;
    const showTopArr = MessageBox.showTopArr;
    let i = 0;
    while (i < arr.length) {
        let box = arr[i];
        if(box.hide) {//移除
            arr.splice(i, 1);
            showTopArr.splice(i, 1);
            let h = box.root.offsetHeight + MessageBox.space;
            for(let j=i;j<showTopArr.length;j++) {
                let top = showTopArr[j];
                showTopArr[j] = top - h < 0 ? 0 : top-h;
            }
            //更新lastTop
            let showTop = showTopArr[showTopArr.length-1];
            if(showTopArr.length < 1 || showTop < 0) {
                showTop = 0;
            }
            let last = arr[arr.length-1];
            if(last) {
                MessageBox.lastTop = showTop + last.root.offsetHeight;
            } else {
                MessageBox.lastTop = showTop;
            }
        } else {
            i++;
        }
    }
    //top
    for(let i=0; i<arr.length; i++){
        let box = arr[i];
        let showTop = showTopArr[i];
        box.root.style.top = showTop + 'px';
        box.hideTop = showTop - MessageBox.space < 0 ? 0 : showTop - MessageBox.space;
    }
    noCreate = false;
}

MessageBox.success = function (option, duration) {
    let opt = {type: 'success'};
    if(typeof(option) === 'string') {
        opt.message = option;
        opt.duration = duration;
    }
    if(typeof(option) === 'object') {
        opt.message = option.message;
        opt.duration = option.duration;
    }
    return DlMessageBox(opt);
};
MessageBox.warning = function (option, duration) {
    let opt = {type: 'warning'};
    if(typeof(option) === 'string') {
        opt.message = option;
        opt.duration = duration;
    }
    if(typeof(option) === 'object') {
        opt.message = option.message;
        opt.duration = option.duration;
    }
    return DlMessageBox(opt);
};
MessageBox.error = function (option, duration) {
    let opt = {type: 'error'};
    if(typeof(option) === 'string') {
        opt.message = option;
        opt.duration = duration;
    }
    if(typeof(option) === 'object') {
        opt.message = option.message;
        opt.duration = option.duration;
    }
    return DlMessageBox(opt);
};
MessageBox.info = function (option, duration) {
    let opt = {type: 'info'};
    if(typeof(option) === 'string') {
        opt.message = option;
        opt.duration = duration;
    }
    if(typeof(option) === 'object') {
        opt.message = option.message;
        opt.duration = option.duration;
    }
    return DlMessageBox(opt);
};

MessageBox.initMessageBox();//自动初始化

export const DlMessageBox = MessageBox;
